<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { useRoute } from 'vue-router'
import { indexInfo } from '../../api/index'
import * as echarts from 'echarts';

// 路由数据
const route = useRoute()

// 首页数据数据
const homeData = reactive({
    typeList: [],
    types: [],
    user: {},
})

// 获取用户数据
const userInfo = computed(() => {
    return homeData.user
})

// 图片数据
const imgUrls = reactive(['/dzf.png', '/dfw.png', '/yqx.png', '/ywc.png'])

// 
const lineChart = ref(null)
// 折线图引用
const chartRef = ref(null)
// 折线图数据
const chartData = reactive({
    xData: [],
    yData: [],
})


// 获取数据
async function getIndexInfo() {
    const { data } = await indexInfo()
    Object.assign(homeData, data.data)

    chartData.xData = homeData.typeList.map(item => item.date)
    chartData.yData = homeData.typeList.map(item => item.order_sum)

    // 渲染图表
    CreateChart()
}

// 创建图表
function CreateChart() {
    // 在 DOM 挂载后初始化 ECharts
    const chart = echarts.init(chartRef.value);

    // 设置图表的配置项和数据
    const option = {
        title: {
            text: '订单数据',
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            data: chartData.xData
        },
        yAxis: {
            type: 'value',
            name: '订单数量'
        },
        series: [
            {
                name: '订单',
                type: 'line',
                data: chartData.yData,
                smooth: true
            }
        ]
    };
    // 使用配置项和数据显示图表
    chart.setOption(option);
}

onMounted(() => {
    // 获取数据
    getIndexInfo()

})
</script>

<template>
    <!-- 面包屑 -->
    <panel-head :route="route" />
    <el-row :gutter="20">
        <el-col :span="12">
            <el-card>
                <div class="user">
                    <el-image style="width: 100px; height: 100px" :src="userInfo.user_img" lazy></el-image>
                    <div class="titleText1">{{ userInfo.user_name }}</div>
                </div>
                <div class="mes">
                    <div class="titleText2">当前权限: {{ userInfo.permission }}</div>
                    <div class="titleText2">当前IP: {{ userInfo.ip }}</div>
                </div>
            </el-card>
        </el-col>
        <!-- 用户信息 -->
        <el-col :span="12">
            <div class="CarList">
                <div class="CarItem" :key="index" v-for="(item, index) in homeData.types">
                    <div class="img">
                        <el-image :src="imgUrls[index]"></el-image>
                    </div>
                    <div class="CarRight">
                        <div class="titleText1">{{ item.num }}</div>
                        <div class="titleText2">{{ item.state }}</div>
                    </div>
                </div>
            </div>
        </el-col>
        <!-- 统计图 -->
        <el-col class="Chart" :span="24">
            <el-card>
                <div ref="chartRef" style="width: 100%; height: 400px;"></div>
            </el-card>
        </el-col>
    </el-row>
</template>

<style scoped lane="less">
.el-row {
    margin: 20px 0;
}

.user {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #cccccc5d;

    .titleText1 {
        font-size: 20px;
        font-weight: 600;
    }
}

.mes {
    display: flex;
    flex-direction: column;
    justify-content: center;

    .titleText2 {
        font-size: 14px;
        font-weight: 550;
        color: rgb(142, 146, 146);
        margin-top: 5px;
    }

    .titleText2:nth-child(1) {
        margin-top: 20px;
    }
}

.CarList {
    height: 165px;
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 40px;
    column-gap: 40px;

    .CarItem {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        .img {
            width: 60px;
            height: 60px;
            background-color: rgb(217, 93, 83);
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 6px;

            .el-image {
                width: 50px;
                height: 50px;
            }
        }

        .CarRight {
            margin-left: 10px;

            .titleText1 {
                font-size: 24px;
                font-weight: 600;
            }
        }
    }

    .CarItem:nth-child(2) .img {
        background-color: rgb(110, 103, 180);
    }

    .CarItem:nth-child(3) .img {
        background-color: rgb(90, 180, 223);
    }

    .CarItem:nth-child(4) .img {
        background-color: rgb(92, 191, 90);
    }
}

.Chart {
    margin: 20px 0;
}
</style>
